<%--
  Created by IntelliJ IDEA.
  User: Administrator  查看模板问卷详情
  Date: 2016/10/8
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  String templateId=request.getParameter("templateId");
    String templateTitle=new String(request.getParameter("templateTitle").getBytes("iso-8859-1"),"UTF-8");
    String questionnaireExplain=new String(request.getParameter("questionnaireExplain").getBytes("iso-8859-1"),"UTF-8");
    String publishObjects=new String(request.getParameter("publishObjects").getBytes("iso-8859-1"),"UTF-8");

%>

<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="easyui-1.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui-1.4/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui-1.4/demo/demo.css">
    <script type="text/javascript" src="easyui-1.4/jquery.min.js"></script>
    <script type="text/javascript" src="easyui-1.4/jquery.easyui.min.js"></script>
    <%--<script type="text/javascript" src="js/json_parse.js"></script>--%>

  <script type="text/JavaScript">
    window.onload = function getJosnData(){
//    alert("进入方法")
        $.ajax({
            method : 'post',
            url : 'rest/QuestionnaireTemplate/selectTemplateParticulars',
            data:'templateId='+<%=templateId%>,
            async : false,
            dataType : 'json',
            success: function(json){
//                alert("返回成功")
//                alert(json)


                for(var i=0;i<json.length;i++){
                    var fxid=i+1;
//                    alert("类型："+json[i].problemTypes)
                    if(json[i].problemTypes=="选择题"){
//                        alert("进入选择题")
                        var formxx="<form id='ff"+fxid+"'>";
                        var formyy="</form><br/>"
                        var tablestart = "<table>";
                        var tableend ="</table><br/>";
//                        alert("生成table")
                        var row1= "<tr><td>第" +json[i].questionNum+"题<input type='hidden' name='questionNumber' value="+json[i].questionNum+"><input type='hidden' name='problemTypes' value='选择题'></td>" +
                                "<td><input class='easyui-textbox' type='text' name='questionContent' data-options='required:true' value=" +json[i].questionContent+ "></td>" +
                                "<td>问题头</td><td><input class='easyui-textbox' type='text' name='questionState'data-options='required:true' value=" +json[i].questionState+ "></td>" +
                                "<td>问题描述</td><td><input class='easyui-textbox' type='text' name='questionDescribe'data-options='required:true' value=" +json[i].questionDescribe+ "></td>" +
                                "<td>关联标签</td><td><input class='easyui-textbox' type='text' name='couplingIndex' value=" +json[i].couplingIndex+ "></td></tr>"
//                        alert("赋值")
                        var option=json[i].opti;
                        var rows="";
                        for(var j=0;j<option.length;j++){
                            var x=j+1;
//                            alert("进入for")
                            var opt=option[j].op;
                            var optionsDescribe=option[j].optionsDescribe;
                            var row="<tr><td>选项"+ x +"</td><td><input class='easyui-textbox' type='text' name='optionsDescribe' data-options='required:true' value=" +optionsDescribe+ "></td><td>分数</td>" +
                                    "<td><input class='easyui-textbox' type='text' name='score' data-options='required:true' value=" +opt+ "></td><td><input type='hidden' name='options' value="+x+"></td></tr>"
                            rows=rows+row;
                        }
//                        alert("添加table")
                        var targetObj =$("#addtable").append(formxx+tablestart + row1 + rows + tableend+formyy);
//                        alert("添加table成功")
                        $.parser.parse(targetObj);

                    }else{
                        //打分题
//                        alert("进入打分题")
                        var formxx="<form id='ff"+fxid+"'>";
                        var formyy="</form><br/>"
                        var tablestart = "<table>";
                        var tableend ="</table><br/>";
//                        alert("生成table")
                        var row1= "<tr><td>第" +json[i].questionNum+"题<input type='hidden' name='questionNumber' value="+json[i].questionNum+"><input type='hidden' name='problemTypes' value='打分题'></td>" +
                                "<td><input class='easyui-textbox' type='text' name='questionContent' data-options='required:true' value=" +json[i].questionContent+ "></td>" +
                                "<td>问题头</td><td><input class='easyui-textbox' type='text' name='questionState'data-options='required:true' value=" +json[i].questionState+ "></td>"+
                                "<td>问题描述</td><td><input class='easyui-textbox' type='text' name='questionDescribe'data-options='required:true' value=" +json[i].questionDescribe+ "></td></tr>"
// <td>关联标签</td><td><input class='easyui-textbox' type='text' name='couplingIndex'data-options='required:true' value=" +json[i].couplingIndex+ "></td>
//                        alert("赋值")
                        var option=json[i].opti;
                        var rows="";
                        for(var j=0;j<option.length;j++){
                            var x=j+1;
//                            alert("进入for")
                            var opt=option[j].op;
                            var optionsDescribe=option[j].optionsDescribe;
                            var couplingIndex=option[j].couplingIndex;
                            var row="<tr><td>属性"+ x +"</td><td><input class='easyui-textbox' type='text' name='optionsDescribe' data-options='required:true' value=" +optionsDescribe+ "></td>" +
                                    "<td>关联标签</td><td><input class='easyui-textbox' type='text' name='couplingIndex' value=" +couplingIndex+ "></td><td><input type='hidden' name='options' value="+x+"></td></tr>"
// "<td>分数</td><td><input class='easyui-textbox' type='text' name='options' data-options='required:true' value=" +opt+ "></td>" +
                            rows=rows+row;
                        }
//                        alert("添加table")
                        var targetObj =$("#addtable").append(formxx+tablestart + row1 + rows + tableend+formyy);
//                        alert("添加table成功")
                        $.parser.parse(targetObj);


                    }

                }

                //调用创建表和填充动态填充数据的方法.

//检查后台返回的数据
//                createShowingTable(data)
            },
            error: function()
            {
//               var msg = "<bean:message key="sys.err.unknowerror"/>";
                alert("msg");
            }

        });
    }
  </script>

    <style>
        body{ text-align:center}
        #addtable{ margin:0 auto;}
        /* css注释：为了观察效果设置宽度 边框 高度等样式 */
    </style>
</head>

<body>

<div id="div">

    <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">

        <table cellpadding="5" id="xx">
            <tr>
                <td><input type="hidden" value="${user.teacherid}" name="publisherId"></td>
            </tr>
            <tr>
                <td>问卷标题:</td>
                <td><input class="easyui-validatebox textbox" type="text" name="questionnaireTitle" data-options='required:true' value=<%=templateTitle%> /></td>
                <%--value=<%=templateTitle%>--%>
            </tr>
            <tr>
                <td>问卷说明:</td>
                <td><input class="easyui-validatebox textbox" type="text" name="questionnaireExplain" data-options='required:true' value=<%=questionnaireExplain%> /></td>
                <%--value=<%=questionnaireExplain%>--%>
                    <%--<select id="explain" onChange="exp()"class="easyui-combobox" name="questionnaireExplain" data-options='required:true' style="width:200px " value=<%=questionnaireExplain%> >--%>
                        <%--<option value="SCL-90">SCL-90</option>--%>
                        <%--<option value="就业">就业</option>--%>
                        <%--<option value="教评">教评</option>--%>
                    <%--</select>--%>
                    <%--questionnaireExplain --%>
            </tr>
            <tr>
                <td>选择群体:</td>
                <td><input class="easyui-validatebox textbox" type="text" name="publishObjects" data-options='required:true' value=<%=publishObjects%> /></td>
                    <%--<select id="sel" onChange="chg()"class="easyui-combobox" name="publishObjects" data-options='required:true' style="width:200px;" value=<%=publishObjects%> >--%>
                        <%--<option value="课程">课程</option>--%>
                        <%--<option value="班级">班级</option>--%>
                    <%--</select>--%>
                    <%--publishObjects value=<%=publishObjects%>--%>
            </tr>
            <tr>
            <td>具体对象:</td>
            　　<td><input class="easyui-validatebox textbox" type="text" name="releaseToWho" data-options='required:true'  /></td>
            </tr>
        </table>
    </form>

        <div id="addtable"></div>




<div style="text-align:center;padding:5px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" id="submitForm">Submit</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" id="clearForm">Clear</a>
</div>

</div>

<script>

    $(function(){

//        alert("进入下面方法")
        $.fn.serializeObject = function(){//form封装成json
            var questionnaire = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (questionnaire[this.name]!= undefined) {
                    if (!questionnaire[this.name].push) {
                        questionnaire[this.name] = [questionnaire[this.name]];
                    }
                    questionnaire[this.name].push(this.value || '');
                } else {
                    questionnaire[this.name] = this.value || '';
                }
            });
            return questionnaire;
        };

        $("#submitForm").click(function(){
//            alert("进入提交方法")
//      var employmentStatistical = $("#ff").serializeArray(); //自动将form表单封装成json
//      alert(JSON.stringify(employmentStatistical));
            var questionnaire = $('#ff').serializeObject();
//            alert(JSON.stringify(questionnaire));
            var list=[];
            var num=document.forms.length-1
//            alert("form的数量："+num)
            for(var i=1;i<=num;i++){
                var questionnaireResult = $("#ff"+i).serializeObject();
//                alert(JSON.stringify(questionnaireResult));

//          questionnaireResult["couplingIndex"]="";

                list.push(questionnaireResult)
            }
//            alert(list)

            questionnaire['questionnaireResult'] = list;

//            alert(JSON.stringify(questionnaire));
            var xx={questionnaire:JSON.stringify(questionnaire)};//JSON.stringify(json)把json转化成字符串

//     $('#ff').form('submit', {
//         data:xx,
//         url : 'rest/QuestionnaireTemplate/insertQuestionnaireTemplate',
//         onSubmit: function () {
//             return $(this).form('enableValidation').form('validate');
//         },
//         success : function(){
////             var obj = JSON.parse(xx)
//             if(xx.code == 200){
//                 $.messager.show({title:'操作提示',msg:xx.message,showType:'show'});
//             }else{
//                 $.messager.show({title:'操作提示',msg:xx.message,showType:'show'});
//             }
//             $('#ff').form('clear');
//         }
//     });
            $.post("rest/Questionnaire/insertQuestionnaire",xx);

        })
        $("#clearForm").click(function(){
            $('#ff').form('clear');
        })
    })
</script>
</body>

</html>
